<template>
  <div
    ref="bars"
    class="bars"
  >
  </div>
</template>

<script>
export default {
  name: 'Bars',
  props: {
    'xData': {
      type: Array
    },
    'data': {
      type: Array
    },
    'color': {
      type: Array,
      default () {
        return ['#ff6dff', '#315bff']
      }
    },
    'yName': {
      type: String,
      default: '出勤百分比(%)'
    },
    'addYAxis': {
      type: Object,
      default () {
        return {}
      }
    },
    'max': {
      default: null
    },
    'rotate': {
      type: Number,
      default: 45
    },
    'grid': {
      type: Object,
      default () {
        return {
          top: '20%',
          left: '0%',
          right: '0%',
          bottom: '5%',
          containLabel: true
        }
      }
    },
    'xSize': {
      type: Number,
      default: 6
    },
    'barGap': {
      type: Number,
      default: 0
    },
    'barWidth': {
      type: Number,
      default: 10
    },
    'yPadding': {
      type: Array,
      default () {
        return [0, 0, 0, 20]
      }
    }
  },
  computed: {
    seriesVal () {
      const arr = []
      for (let i in this.data) {
        arr.push({
          name: this.data[i].name,
          type: 'bar',
          data: this.data[i].value,
          barGap: this.barGap,
          barWidth: this.barWidth,
          areaStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: this.color[i]
              }, {
                offset: 1,
                color: 'rgba(11, 30, 81, 0)'
              }])
            }
          },
          lineStyle: {
            width: 1
          }
        })
        if (this.data[i].yAxisIndex) {
          arr[i].yAxisIndex = 1
        }
      }
      return arr
    },
    legendData () {
      const arr = []
      for (let i in this.data) {
        arr.push(this.data[i].name)
      }
      return arr
    }
  },
  watch: {
    seriesVal () {
      this.draw()
    }
  },
  mounted () {
    this.draw()
    this.$common.winResize(this.$echarts.init(this.$refs.bars))
  },
  methods: {
    draw () {
      const $bars = this.$echarts.init(this.$refs.bars)
      const $this = this
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: 'rgba(255, 255, 255, .05)'
            }
          },
          backgroundColor: 'rgba(7, 23, 71, .8)',
          padding: 10,
          borderColor: '#2c76c0',
          borderWidth: 1,
          textStyle: {
            color: '#45beed'
          }
        },
        color: this.color,
        legend: {
          data: this.legendData,
          x: 'right',
          itemWidth: 15,
          itemHeight: 10,
          textStyle: {
            color: '#9fade2'
          }
        },
        grid: this.grid,
        xAxis: {
          data: this.xData,
          axisLine: {
            show: false
          },
          axisLabel: {
            rotate: this.rotate,
            textStyle: {
              color: '#536390'
            },
            formatter: function (params) {
              var newParamsName = ''
              var paramsNameNumber = params.length
              var provideNumber = $this.xSize
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ''
                  var start = p * provideNumber
                  var end = start + provideNumber
                  if (p === rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber)
                  } else {
                    tempStr = params.substring(start, end) + '\n'
                  }
                  newParamsName += tempStr
                }
              } else {
                newParamsName = params
              }
              return newParamsName
            }
          }
        },
        yAxis: [{
          min: 0,
          max: this.max,
          name: this.yName,
          nameTextStyle: {
            color: '#536390',
            padding: this.yPadding
          },
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(57, 121, 211, .5)'
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(24, 61, 111, .4)', 'rgba(24, 61, 111, 0)']
            }
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#536390'
            }
          }
        }],
        series: this.seriesVal
      }
      if (this.addYAxis.name) {
        option.yAxis.push(this.addYAxis)
      }
      $bars.setOption(option, true)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'
  .bars
    width: 100%
    height: 100%
</style>
